import React, {Component} from 'react';


// const a = {}
//
//
// const b = {}
//
// const c = {}
//
// a.next = b
// b.next = c

class Index extends Component {

  state = {
    msg: '黑马',
    num: 0
  }

  // 合成事件控制的
  // 先开启批量更新标识
  // 执行函数
  // isBatchingEventUpdates = true
  changeMsg = () => {
    // 合成事件/生命周期函数内部是异步的
    // 原生事件或者定时器里面同步的
    // setState是异步的

    // 更新队列

    // 链表
    // setState的时候，只是把参数放到链表里面去了，更新的时候，再去通过next获取结果，所有的链表执行完之后，更新state。渲染界面
    // 首先判断是否是批量更新 默认情况下是false
    // 如果是批量更新，构建更新链表
    // 如果不是批量更新，直接更新
    // 批量更新
    // {}
    // [function, {}, function, function, {}, function]
    // state
    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })

    this.setState({
      num: 10
    })

    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })

    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })

    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })

    this.setState(prevState => {
      return {
        num: prevState.num + 1
      }
    })

    console.log(this.state.num)

    setTimeout(() => {
      // 修改state同步的
      this.setState({
        msg: '千锋'
      })
      console.log(this.state.msg)
    }, 1000)
    // console.log(this.state.msg)
  }

  // isBatchingEventUpdates = false


  render() {
    return (
      <div>
        state
        <h1>{this.state.num}</h1>
        <button onClick={this.changeMsg}>点击</button>
      </div>
    );
  }
}

export default Index;
